<template>
  <div class="">
    <my-header>
      <span>{{ title }}</span>
    </my-header>
    <ul class="con">
      <li v-for="(item, ind) in list[index].content" :key="ind">
        <p>{{ item.time }}</p>
        <p>{{ item.title }}</p>
        <button @click="remove(index, ind)">撤销</button>
      </li>
    </ul>

    <button @click="clear">撤销全部</button>

    <my-footer v-model="con">
      <button @click="addMsg">确定</button>
    </my-footer>
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import myHeader from "../components/myHeader.vue";
import myFooter from "../components/myFooter.vue";
export default {
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
      con: "",
    });
    const { title, index } = route.query;
    //拿到home页面传来的标题和下标 这里用解构赋值拿

    const list = computed(() => {
      return store.state.list;
    });
    //拿到vuex中存的列表数据

    const addMsg = () => {
      if (data.con == "") {
        alert("不能为空");
        return false;
      }
      store.commit("addMsg", { index: index, con: data.con });
      data.con = "";
    };

    const remove = (index, ind) => {
      // index是第一层的下标
      // ind是第二层的下标
      store.commit("remove", { index, ind });
    };

    const clear = () => {
      store.commit("clear", index);
    };
    //调用vuex中的撤销全部的方法
    return { ...toRefs(data), title, list, addMsg, index, remove, clear };
  },
  components: {
    myHeader,
    myFooter,
  },
};
</script>

<style lang="scss">
.con {
  li {
    display: flex;
    margin: 20px 0;
    justify-content: space-between;
  }
}
</style>
